// 商品清单
<template>
  <div class="container">
    <h4>商品清单</h4>
    <ul>
      <li>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="info" label="商品信息" width="600">
            <template slot-scope="scope">
              <div class="info" style="display:flex;flex-direction:row;align-items: center;">
                <img
                  :src="scope.row.goods_logo"
                  style="width: 60px;height: 60px;margin: 10px 20px;"
                >
                <div>
                  <span>{{ scope.row.goods_title }}</span>
                  <p>商品型号：WDF{{ scope.row.goods_spec }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="selling_price" label="￥单价（元）" width="180"></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column label="￥金额（元）">
            <template slot-scope="scope">
              <div>
                {{ (scope.row.num * scope.row.selling_price).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-form ref="form" :model="form" label-width="100px">
          <div class="k2">
            <el-form-item label="客户合同号">
              <el-input v-model="form.contractNum" size="mini" placeholder="可选填贵公司系统对应的合同号" @blur="blur"></el-input>
            </el-form-item>
            <el-form-item label="添加备注">
              <el-input v-model="form.Remarks" size="mini" placeholder="限制字数在60个以内" @blur="blur"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "DetailedList",
  data() {
    return {
      form: {
        contractNum: "", // 合同号
        Remarks: "" // 备注
      }
    }
  },
  methods: {
    blur(){
      this.$emit('formChanges',this.form)
    }
  },
  computed:{
    tableData(){
      return this.$store.state.SettlementData
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  h4 {
    line-height: 50px;
  }

  .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    p {
      color: #8d8d8d;
      font-size: 12px;
    }
    img {
      width: 60px;
      height: 60px;
      margin: 0px 20px;
    }
    span {
      font-weight: bold;
    }
  }
  .k2 {
    display: flex;
    flex-direction: row;
    .el-form-item:first-child {
      width: 30%;
    }
    .el-form-item:last-child {
      width: 70%;
    }
  }
}
</style>
